<template>
  <div class="body">
    <!-- 左边内容 -->
    <div class="left">
      <a-input-search placeholder="搜索规则名称" style="width: 343px; height: 32px; margin-top: 14px" />
      <div class="left-top">
        <span class="title">招工劳务费规则</span>
        <div
          style="
            display: flex;
            flex-direction: row;
            align-items: center;
            cursor: pointer;
          "
          @click="onCreate"
        >
          <a-icon type="plus-circle" class="icon" />
          <span class="title1">新增规则</span>
        </div>
      </div>
      <div class="xian"></div>
      <div
        class="left-center"
        v-for="(item, index) in list"
        :key="index"
        :class="listIndex == index ? 'active' : ''"
        @click="onClickRule(item, index)"
      >
        <span :class="listIndex === index ? 'listTitle' : 'left-center-title'">{{ item.name }}</span>
        <span class="left-center-title1">{{ item.usePeopleNumber }}人</span>
      </div>
    </div>
    <!-- 右边内容 -->
    <div class="right" v-if="list.length">
      <!-- 编辑删除 -->
      <div class="right-top">
        <div style="color: #3c3d43; font-size: 18px">
          {{ this.selectedDetail.name ? this.selectedDetail.name : "" }}
        </div>
        <div>
          <a-button type="primary" ghost style="margin-right: 15px" @click="deleteVisible = true">
            删除
          </a-button>
          <a-button type="primary" @click="showEdit"> 编辑 </a-button>
        </div>
      </div>
      <div style="margin-top: 20px">
        <div class="shu">
          <div class="shuxian"></div>
          <div style="color: #000000; font-size: 16px; margin-left: 10px">
            具体规则
          </div>
        </div>
        <div v-if="selectedDetail.hourAmountRule && selectedDetail.hourAmountRule.length">
          <div class="detailTextStyle">
            渠道分润
          </div>
          <div style="margin-top: 5px" v-if="selectedDetail.hourAmount">
            <span style="color: #767885; font-size: 14px; margin-left: 35px">基本：{{ selectedDetail.hourAmount }}元/小时</span>
          </div>
          <div style="margin-top: 5px" v-for="(item, index) in selectedDetail.hourAmountRule" :key="index">
            <span style="color: #767885; font-size: 14px; margin-left: 35px">条件{{ index + 1 }}：</span
            ><span v-if="item.type === '1'" style="color: #3c3d43; font-size: 14px; margin-left: 5px"
              >自{{ item.time }}后，抽成变为{{ item.newHourAmount }}元</span
            >
            <span v-if="item.type === '2'" style="color: #3c3d43; font-size: 14px; margin-left: 5px"
              >入职满{{ item.number }}{{ ["月", "天", "工时"][item.units - 1] }}之后，抽成变为{{ item.newHourAmount }}元/小时</span
            >
          </div>
        </div>
        <div v-if="selectedDetail.redPacketRule && selectedDetail.redPacketRule.length">
          <div class="detailTextStyle">
            一次性红包
          </div>
          <div style="margin-top: 5px" v-for="(item, index) in selectedDetail.redPacketRule" :key="index">
            <span style="color: #767885; font-size: 14px; margin-left: 35px">条件{{ index + 1 }}：</span
            ><span style="color: #3c3d43; font-size: 14px; margin-left: 5px">入职一次性红包{{ item.redPacketAmount }}元</span>
          </div>
        </div>
        <div v-if="selectedDetail.leaveOfficeRule && selectedDetail.leaveOfficeRule.length">
          <div class="detailTextStyle">
            离职倒扣
          </div>
          <div style="margin-top: 5px" v-for="(item, index) in selectedDetail.leaveOfficeRule" :key="index">
            <span style="color: #767885; font-size: 14px; margin-left: 35px">条件{{ index + 1 }}：</span
            ><span v-if="item.type === '1'" style="color: #3c3d43; font-size: 14px; margin-left: 5px"
              >离职不满{{ item.number }}{{ ["个月", "天", "工时"][item.units - 1] }}扣款{{ item.deductAmount }}元</span
            >
            <span v-if="item.type === '2'" style="color: #3c3d43; font-size: 14px; margin-left: 5px"
              >离职不满{{ item.number }}{{ ["个月", "天", "工时"][item.units - 1] }}减少工价为{{ item.newHourAmount }}元</span
            >
          </div>
        </div>
        <div class="detailTextStyle" v-if="selectedDetail.specialCost">
          其他规则
        </div>
        <div style="margin-top: 5px" v-if="selectedDetail.specialCost">
          <span style="color: #767885; font-size: 14px; margin-left: 35px"
            >只要工人在职，额外结算{{ selectedDetail.specialCost }}元/月</span
          >
        </div>
      </div>
      <!-- 使用者 -->
      <div style="margin-top: 20px">
        <div class="shu">
          <div class="shuxian"></div>
          <div style="color: #000000; font-size: 16px; margin-left: 10px">
            使用者
          </div>
        </div>
      </div>
      <!-- 搜索 -->
      <a-input-search
        v-model="nameOrIdCard"
        placeholder="搜索姓名/身份证号"
        style="width: 201px; height: 32px; margin-top: 14px"
        @search="onSearch1"
      />
      <!-- 表格 -->
      <a-table style="margin-top: 15px" rowKey="id" :columns="columns" :data-source="empDetailList" :pagination="paginationOpt">
        <span slot="channelName" slot-scope="text, record">
          {{ record.channelVO ? record.channelVO.name : "---" }}
        </span>
      </a-table>
    </div>
    <!-- 添加抽屉 -->
    <a-drawer :title="title" :placement="placement" width="580px" :visible="visible" @close="onClose">
      <a-form-model ref="ruleForm" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-model-item
          ref="name"
          label="规则名称"
          prop="name"
          :rules="{
            required: true,
            message: '请输入'
          }"
          ><a-input style="width: 220px;" placeholder="请输入" v-model="form.name"
        /></a-form-model-item>
      </a-form-model>
      <div style="margin-top: 20px">
        <div class="shu">
          <div class="shuxian"></div>
          <div style="color: #000000; font-size: 16px; margin-left: 10px">
            具体规则
          </div>
        </div>
      </div>
      <!-- 工时抽成 ！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！-->
      <div>
        <div>
          <a-checkbox :checked="checked3" @change="onChange3" style="margin-top: 15px">
            渠道分润
          </a-checkbox>
        </div>
        <div v-if="checked3" style="margin-top:20px;">
          <div style="display:flex;margin-bottom:20px">
            <div>
              工价
              <a-input-number style="width: 88px; margin-left: 5px" :min="0" v-model="form.hourAmount" />
              元/小时
            </div>
            <div style="margin-left:20px">
              <a-dropdown>
                <a-menu slot="overlay" @click="handleMenuClick2">
                  <a-menu-item key="2"> 按月/天/工时变更工时抽成 </a-menu-item>
                  <a-menu-item key="1"> 固定日期变更工时抽成 </a-menu-item>
                </a-menu>
                <a-button type="primary" ghost
                  ><a-icon type="plus" />
                  新增变更条件
                </a-button>
              </a-dropdown>
            </div>
          </div>
          <div style="margin-top: 10px;display:flex;align-items: center;" v-for="(item, index) in changeList" :key="index">
            <div v-if="item.type === '2'">
              入职满
              <a-input-number :min="0" style="width: 88px; margin-right: 10px" v-model="item.number" />
              <a-select style="width: 120px; margin-right: 10px" v-model="item.units">
                <a-select-option v-for="(item, index) in option" :key="index" :value="item.value">
                  {{ item.label }}
                </a-select-option>
              </a-select>
              <span>
                抽成变为
                <a-input-number style="width: 88px; margin-left: 5px" :min="1" v-model="item.newHourAmount" />
                元/小时
              </span>
            </div>
            <div v-if="item.type === '1'">
              自
              <a-date-picker v-model="item.time" />
              抽成变为
              <a-input-number style="width: 88px; margin-left: 5px" :min="1" v-model="item.newHourAmount" />
              元/小时
            </div>
            <a-icon class="deleteIcon" type="delete" style="font-size: 18px; margin-left: 10px" @click="deleteChangeList(item, index)" />
          </div>
        </div>
      </div>
      <!-- 一次性红包 ！！！！！！！！！！！！！！！！！！！！！！！！！！-->
      <div>
        <a-checkbox :checked="checked" @change="onChange" style="margin-top: 15px">
          一次性红包
        </a-checkbox>
        <div style="margin-top: 10px" v-for="(item, index) in numList" :key="index">
          满
          <a-input-number :min="1" style="width: 88px; margin-right: 10px" v-model="item.number" />
          <a-select style="width: 120px; margin-right: 10px" v-model="item.units">
            <a-select-option v-for="(item, index) in option" :key="index" :value="item.value">
              {{ item.label }}
            </a-select-option>
          </a-select>
          发放
          <a-input-number style="width: 88px; margin-left: 5px" :min="1" v-model="item.redPacketAmount" />
          元红包
          <a-icon class="deleteIcon" type="delete" style="font-size: 18px; margin-left: 10px" @click="deleteNumList(item, index)" />
          <a-icon class="addIcon" type="plus-circle" style="font-size: 18px; margin-left: 10px" @click="createNumList" />
        </div>
      </div>
      <!-- 离职倒扣！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！ -->
      <div>
        <div>
          <a-checkbox :checked="checked1" @change="onChange1" style="margin-top: 15px">
            离职倒扣
          </a-checkbox>
        </div>
        <div style="margin-top: 15px" v-if="checked1">
          <a-dropdown>
            <a-menu slot="overlay" @click="handleMenuClick">
              <a-menu-item key="1"> 不满月/天/工时倒扣工资 </a-menu-item>
              <a-menu-item key="2"> 不满月/天/工时减少工价 </a-menu-item>
            </a-menu>
            <a-button type="primary" ghost
              ><a-icon type="plus" />
              新增倒扣条件
            </a-button>
          </a-dropdown>
        </div>
        <div style="margin-top: 10px" v-for="(item, index) in leaveList" :key="index">
          不满
          <a-input-number :min="1" style="width: 88px; margin-right: 10px" v-model="item.number" />
          <a-select style="width: 120px; margin-right: 10px" v-model="item.units">
            <a-select-option v-for="(item, index) in option" :key="index" :value="item.value">
              {{ item.label }}
            </a-select-option>
          </a-select>
          <span v-if="item.type === '1'">
            倒扣
            <a-input-number style="width: 88px; margin-left: 5px" :min="1" v-model="item.deductAmount" />
            元工资
          </span>
          <span v-if="item.type === '2'">
            工价变为
            <a-input-number style="width: 88px; margin-left: 5px" :min="1" v-model="item.newHourAmount" />
            元/小时
          </span>
          <a-icon class="deleteIcon" type="delete" style="font-size: 18px; margin-left: 10px" @click="deleteLeaveList(item, index)" />
        </div>
      </div>
      <!-- 其他费用 ！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！-->
      <div>
        <div>
          <a-checkbox :checked="checked2" @change="onChange2" style="margin-top: 15px;">
            其他费用
          </a-checkbox>
        </div>
        <div v-if="checked2" style="margin-top:20px;margin-bottom:40px">
          <span>
            只要工人在职，额外结算
            <a-input-number style="width: 88px; margin-left: 5px" :min="0" v-model="form.specialCost" />
            元/每月
          </span>
        </div>
      </div>
      <div class="drawer-footer-box">
        <a-button :style="{ marginRight: '12px' }" @click="onClose">
          取消
        </a-button>
        <a-button type="primary" html-type="submit" @click="handleAddOK">确定</a-button>
      </div>
    </a-drawer>
    <a-modal title="删除工价规则" :visible="deleteVisible" @ok="deleteRules" @cancel="deleteVisible = false">
      <div style="display: flex; justify-content:center">
        <a-icon type="question-circle" style="font-size: 24px; color: #6a66f6" />
        <p
          style="
          margin-left:20px;
            font-size: 16px;
            font-weight: 500;
            color: #3c3d43;
            line-height: 20px;
          "
        >
          您确定要删除该规则吗？一旦删除不可恢复
        </p>
      </div>
    </a-modal>
  </div>
</template>
<script>
import { formatDate } from "@/utils/index";
const columns = [
  {
    title: "姓名",
    dataIndex: "name",
    key: "name",
    width: 100
  },
  {
    title: "联系电话",
    dataIndex: "phone",
    key: "phone",
    width: 120
  },
  {
    title: "最近入职日期",
    dataIndex: "joinDate",
    key: "joinDate",
    customRender: (text, record, index) => {
      return formatDate(text);
    },
    width: 120,
    scopedSlots: { customRender: "joinDate" }
  },
  {
    title: "当前用工单位",
    dataIndex: "workingUnitName",
    key: "workingUnitName",
    width: 100
  },
  {
    title: "渠道来源",
    dataIndex: "channelName",
    key: "channelName",
    width: 100,
    scopedSlots: { customRender: "channelName" }
  }
];
import moment from "moment";
import { addRules, getAllRules, editRules, deleteRules, getEmpDetails } from "@/api/outsourcing/outsourcing";
export default {
  data() {
    return {
      columns,
      form: {},
      deleteVisible: false,
      checked: false,
      checked1: false,
      checked2: false,
      checked3: false,
      numList: [],
      leaveList: [],
      changeList: [],
      option: [
        {
          label: "工时",
          value: 1
        },
        {
          label: "月",
          value: 2
        },
        {
          label: "天",
          value: 3
        }
      ],
      listIndex: 0,
      title: "",
      visible: false,
      placement: "right",
      name: "",
      nameOrIdCard: null,
      goOnState1: true,
      goOnState2: true,
      goOnState3: true,
      goOnState4: true,
      goOnState5: true,
      dataList: [],
      empDetailList: [],
      list: [],
      labelCol: { span: 4 },
      keyId: null,
      selectedDetail: {},
      wrapperCol: { span: 20 },
      paginationOpt: {
        current: 1,
        defaultCurrent: 1, // 默认当前页数
        defaultPageSize: 5, // 默认当前页显示数据的大小
        total: 0, // 总数，必须先有
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ["5", "10", "20"],
        showTotal: total => `共 ${total} 条`, // 显示总数
        onShowSizeChange: (current, pageSize) => {
          this.paginationOpt.current = 1;
          this.paginationOpt.defaultCurrent = 1;
          this.paginationOpt.defaultPageSize = pageSize;
          // this.list(); // 显示列表的接口名称
        },
        // 改变每页数量时更新显示
        onChange: (current, size) => {
          this.paginationOpt.current = current;
          this.paginationOpt.defaultCurrent = current;
          this.paginationOpt.defaultPageSize = size;
          // this.list();
        }
      }
    };
  },
  created() {
    this.getAllRulesList();
  },
  methods: {
    onSearch1(value) {
      this.nameOrIdCard = value;
      this.getAllRulesList();
    },
    // 查询人员
    getEmpDetailsList() {
      getEmpDetails({
        nameOrIdCard: this.nameOrIdCard,
        salaryCalculateRuleId: this.selectedDetail.id,
        pageNo: this.paginationOpt.defaultCurrent,
        pageSize: this.paginationOpt.defaultPageSize
      }).then(res => {
        this.empDetailList = res.data.entities;
        this.paginationOpt.total = res.data && res.data.entityCount;
      });
    },
    // 删除
    deleteRules() {
      deleteRules(this.selectedDetail.id).then(res => {
        this.$notification["success"]({
          message: "success",
          description: "删除成功"
        });
        this.deleteVisible = false;
        this.listIndex = 0;
        this.getAllRulesList();
      });
    },
    // 查询规则
    getAllRulesList() {
      getAllRules({
        ruleType: 2
      }).then(res => {
        this.list = res.data;
        if (this.list.length > 0) {
          this.selectedDetail = this.list[this.listIndex];
          this.selectedDetail.hourAmountRule = JSON.parse(this.selectedDetail.hourAmountRule);
          this.selectedDetail.leaveOfficeRule = JSON.parse(this.selectedDetail.leaveOfficeRule);
          this.selectedDetail.redPacketRule = JSON.parse(this.selectedDetail.redPacketRule);
        }
        this.getEmpDetailsList();
      });
    },
    onClose() {
      this.visible = false;
    },

    // 新增规则
    handleAddOK() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.changeList.forEach((item, index) => {
            if (item.time) {
              item.time = moment(item.time).format("YYYY-MM-DD");
            }
          });
          this.form.hourAmountRule = JSON.parse(JSON.stringify(this.changeList));
          this.form.redPacketRule = this.numList;
          this.form.leaveOfficeRule = this.leaveList;
          if (this.form.hourAmountRule.length > 0) {
            this.form.hourAmountRule.forEach((item, index) => {
              if (item.type === "1") {
                if (item.newHourAmount === null || item.time === null || item.newHourAmount === undefined || item.time === undefined) {
                  this.$message.error("固定日期变更规则内容都为必填");
                  this.goOnState1 = false;
                } else {
                  this.goOnState1 = true;
                }
              }
              if (item.type === "2") {
                if (
                  item.newHourAmount === null ||
                  item.units === null ||
                  item.number === null ||
                  item.newHourAmount === undefined ||
                  item.units === undefined ||
                  item.number === undefined
                ) {
                  this.$message.error("按月/天/工时变更规则内容都为必填");
                  this.goOnState2 = false;
                } else {
                  this.goOnState2 = true;
                }
              }
            });
          }
          if (this.form.redPacketRule.length > 0) {
            this.form.redPacketRule.forEach((item, index) => {
              if (
                item.redPacketAmount === null ||
                item.units === null ||
                item.number === null ||
                item.redPacketAmount === undefined ||
                item.units === undefined ||
                item.number === undefined
              ) {
                this.$message.error("一次性红包规则内容都为必填");
                this.goOnState3 = false;
              } else {
                this.goOnState3 = true;
              }
            });
          }
          if (this.form.leaveOfficeRule.length > 0) {
            this.form.leaveOfficeRule.forEach((item, index) => {
              if (item.type === "1") {
                if (
                  item.number === null ||
                  item.units === null ||
                  item.deductAmount === null ||
                  item.number === undefined ||
                  item.units === undefined ||
                  item.deductAmount === undefined
                ) {
                  this.$message.error("倒扣工资规则内容都为必填");
                  this.goOnState4 = false;
                } else {
                  this.goOnState4 = true;
                }
              }
              if (item.type === "2") {
                if (
                  item.number === null ||
                  item.units === null ||
                  item.newHourAmount === null ||
                  item.number === undefined ||
                  item.units === undefined ||
                  item.newHourAmount === undefined
                ) {
                  this.$message.error("减少工价规则内容都为必填");
                  this.goOnState5 = false;
                } else {
                  this.goOnState5 = true;
                }
              }
            });
          }
          if (
            this.title === "新增招工劳务费规则" &&
            this.goOnState1 === true &&
            this.goOnState2 === true &&
            this.goOnState3 === true &&
            this.goOnState4 === true &&
            this.goOnState5 === true
          ) {
            addRules({
              ruleType: 2,
              ...this.form
            }).then(res => {
              this.$notification["success"]({
                message: "success",
                description: "添加成功"
              });
              this.visible = false;
              this.listIndex = 0;
              this.getAllRulesList();
            });
          }
          if (
            this.title === "编辑招工劳务费规则" &&
            this.goOnState1 === true &&
            this.goOnState2 === true &&
            this.goOnState3 === true &&
            this.goOnState4 === true &&
            this.goOnState5 === true
          ) {
            editRules({
              ruleType: 2,
              ...this.form,
              id: this.keyId
            }).then(res => {
              this.$notification["success"]({
                message: "success",
                description: "编辑成功"
              });
              this.visible = false;
              this.listIndex = 0;
              this.getAllRulesList();
            });
          }
        }
      });
    },
    // 日期选择器变化
    dateChange() {},
    // 左侧侧边栏内容点击事件
    onClickRule(item, index) {
      this.listIndex = index;
      this.getAllRulesList();
    },
    // 点击编辑
    showEdit() {
      this.form = {
        name: null,
        hourAmount: null,
        specialCost: null
      };
      this.checked = false;
      this.checked1 = false;
      this.checked2 = false;
      this.checked3 = false;
      this.form.hourAmount = null;
      this.form.specialCost = null;
      this.title = "编辑招工劳务费规则";
      this.visible = true;
      this.changeList = [];
      this.numList = [];
      this.leaveList = [];
      this.$nextTick(() => {
        this.$refs.ruleForm.clearValidate();
        this.form.name = this.selectedDetail.name;
        this.form.hourAmount = this.selectedDetail.hourAmount;
        this.form.specialCost = this.selectedDetail.specialCost;
        this.keyId = this.selectedDetail.id;
        if (
          this.selectedDetail.specialCost !== "null" &&
          this.selectedDetail.specialCost !== null &&
          this.selectedDetail.specialCost !== undefined
        ) {
          this.checked2 = true;
        }
        if (this.selectedDetail.hourAmountRule !== null && this.selectedDetail.hourAmountRule.length > 0) {
          this.changeList = JSON.parse(JSON.stringify(this.selectedDetail.hourAmountRule));
          this.checked3 = true;
        }
        if (this.selectedDetail.redPacketRule !== null && this.selectedDetail.redPacketRule.length > 0) {
          this.numList = JSON.parse(JSON.stringify(this.selectedDetail.redPacketRule));
          this.checked = true;
        }
        if (this.selectedDetail.leaveOfficeRule !== null && this.selectedDetail.leaveOfficeRule.length > 0) {
          this.leaveList = JSON.parse(JSON.stringify(this.selectedDetail.leaveOfficeRule));
          this.checked1 = true;
        }
      });
    },
    // 添加事件
    onCreate() {
      this.title = "新增招工劳务费规则";
      this.visible = true;
      this.$nextTick(() => {
        this.$refs.ruleForm.clearValidate();
        this.form = {};
        this.changeList = [];
        this.numList = [];
        this.leaveList = [];
        this.checked = false;
        this.checked1 = false;
        this.checked2 = false;
        this.checked3 = false;
      });
    },
    // 一次性红包添加事件
    onChange(e) {
      if (e.target.checked) {
        this.numList.push({ number: null, units: null, redPacketAmount: null });
        this.checked = true;
      } else {
        this.numList = [];
        this.checked = false;
      }
    },
    // 离职倒扣
    onChange1(e) {
      if (e.target.checked) {
        this.checked1 = true;
      } else {
        this.checked1 = false;
        this.leaveList = [];
      }
    },
    // 其他费用
    onChange2(e) {
      if (e.target.checked) {
        this.checked2 = true;
      } else {
        this.checked2 = false;
      }
    },
    // 工时抽成
    onChange3(e) {
      if (e.target.checked) {
        this.checked3 = true;
      } else {
        this.checked3 = false;
        this.changeList = [];
      }
    },
    createNumList() {
      this.numList.push({ number: null, units: null, redPacketAmount: null });
    },
    // 删除发放红包项
    deleteNumList(item, index) {
      this.numList.splice(index, 1);
      if (this.numList.length === 0) {
        this.checked = false;
      }
    },
    // 新增倒扣条件
    handleMenuClick(e) {
      if (e.key === "1") {
        this.leaveList.push({
          type: e.key,
          number: null,
          units: "",
          deductAmount: null
        }); // 不满月/天/工时倒扣工资
      } else {
        this.leaveList.push({
          type: e.key,
          number: null,
          units: "",
          newHourAmount: null
        }); // 不满月/天/工时减少全价
      }
    },
    // 新增变更条件
    handleMenuClick2(e) {
      if (e.key === "1") {
        this.changeList.push({
          type: e.key,
          newHourAmount: null,
          time: null
        });
      } else {
        this.changeList.push({
          type: e.key,
          number: null,
          units: null,
          newHourAmount: null
        });
      }
    },
    // 删除离职倒扣项
    deleteLeaveList(item, index) {
      this.leaveList.splice(index, 1);
      if (this.leaveList.length === 0) {
        this.checked1 = false;
      }
    },
    // 删除变更条件
    deleteChangeList(item, index) {
      this.changeList.splice(index, 1);
      if (this.changeList.length === 0) {
        this.checked3 = false;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.body {
  width: 100%;
  min-height: 820px;
  background-color: #ffffff;
  padding: 20px;
  display: flex;
  flex-direction: row;
  .left {
    width: 365px;
    min-height: 820px;
    border-right: 1px solid #cccccc;
    background-color: #ffffff;
    .left-top {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      margin-top: 26px;
      .title {
        margin-left: 24px;
        color: #000000;
        font-size: 16px;
        font-weight: 1000;
      }
      .icon {
        margin-right: 5px;
        color: var(--primary);
        font-size: 24px;
      }
      .title1 {
        margin-right: 36px;
        color: var(--primary);
        font-size: 14px;
        font-weight: 1000;
      }
    }
    .xian {
      width: 343px;
      height: 1px;
      background-color: #cccccc;
      margin: 15px 0 10px 0;
    }
    .left-center {
      width: 343px;
      height: 48px;
      border-bottom: 1px solid #cccccc;
      background: #ffffff;
      display: flex;
      flex-flow: row;
      align-items: center;
      justify-content: space-between;
      .left-center-title {
        margin-left: 24px;
        color: #55565d;
        font-size: 14px;
      }
      .left-center-title1 {
        margin-right: 16px;
        color: #55565d;
        font-size: 14px;
      }
    }
    .active {
      background: #f0effe;
    }
    .listTitle {
      margin-left: 24px;
      font-size: 15px;
      color: var(--primary);
    }
  }
  .right {
    display: flex;
    flex: 1;
    flex-direction: column;
    margin-top: 24px;
    padding: 0 10px 0 15px;
    background-color: #ffffff;
    .right-top {
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }
  }
}
.addIcon {
  color: var(--primary);
}
.deleteIcon:hover {
  color: #fa5051;
}
.shu {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  .shuxian {
    width: 3px;
    height: 20px;
    background: var(--primary);
  }
}
.detailTextStyle {
  margin-top: 15px;
  color: #3c3d43;
  font-size: 14px;
  margin-left: 15px;
  font-weight: 1000;
}
.ant-drawer {
  overflow: scroll;
}
</style>
